<template>
  <view class="goods-info"  @tap="goDetails">
    <image :src="goodsInfo.img" class="goods-img" />
    <view class="goods-box">
      <view class="goods-name" :style="{width:goodsWidth}"> {{goodsInfo.name}} </view>
      <view class="goods-intro" :style="{width:goodsWidth}"> {{goodsInfo.msg}} </view>
      <view class="sales" v-if="goodsInfo.num == 0"> 销量：{{goodsInfo.sales}} </view>
      <view class="price-num">
        <view class="goods-price">
          <view class="new-price"> ￥<text>{{goodsInfo.price=='0.00'?'面议':goodsInfo.price}}</text></view>
          <!-- <view class="old-price"> 原价：￥{{goodsInfo.original_price}}</view> -->
        </view>
        <view class="add" @tap.stop="emit('add')" v-if="goodsInfo.num == 0 && isBtn"> + </view>
      </view>
      <view class="sales" v-if="goodsInfo.num > 0">
        销量：{{goodsInfo.sales}}
        <view class="num-btn">
          <view class="min btn" @tap.stop="emit('sub')"></view>
          <view class="num"> {{ goodsInfo.num }} </view>
          <view class="add btn" @tap.stop="emit('add')"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { computed, ref } from 'vue';
  const { safeArea } = uni.getSystemInfoSync()
  const emit = defineEmits(['add', 'sub'])
	const props = defineProps({
		isBtn: {
			type: Boolean,
			default: true
		},
		goodsInfo: {
			type: Object,
			default: {}
		}
	})
	const goodsArgRef = ref()
  const goodsWidth = computed(() => {
    return safeArea.width - 196 + 'px'
  })
  const num = ref(0)
	const goDetails = () => {
		uni.navigateTo({
			url: `/pages/productDetails/productDetails?spu=${props.goodsInfo.spu}`
		})
	}
	defineExpose({
		num
	})
</script>

<style lang="scss" scoped>
  .goods-info {
    height: 100px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    .goods-img {
      width: 80px;
      height: 80px;
      margin-right: 10px;
      border-radius: 10px;
    }
    .goods-box {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .goods-name,
      .goods-intro {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .goods-name {
        height: 16px;
        color: #3D3D3D;
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
      }
      .goods-intro {
        color: #999999;
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
      }
      .sales {
        height: 11px;
        font-weight: 400;
        font-size: 12px;
        color: #999999;
        line-height: 11px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .num-btn {
          display: flex;
          align-items: center;
          .btn {
            width: 16px;
            height: 16px;
            border-radius: 50%;
          }
          .add {
            color: #ffffff;
            margin-left: 6px;
						position: relative;
            background: #FF3B1E;
						&::before, &::after {
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							display: block;
							content: '';
							width: 8px;
							height: 1px;
							background: #FFFFFF;
							border-radius: 21px;
						}
						&::after {
							height: 8px;
							width: 1px;
						}
          }
          .num {
            color: #666666;
            font-size: 12px;
            font-weight: 400;
            line-height: 11px;
          }
          .min {
            color: #999999;
            margin-right: 6px;
            background: #EBEBEB;
						position: relative;
						&::before {
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							display: block;
							content: '';
							width: 8px;
							height: 1px;
							background: #999999;
							border-radius: 21px;
						}
          }
        }
      }

      .price-num {
        display: flex;
        justify-content: space-between;
        .goods-price {
          display: flex;
          align-items: center;
          .new-price {
            font-size: 10px;
            color: #FF3B1E;
            text {
              font-size: 15px;
              font-weight: 600;
            }
          }

          .old-price {
            color: #AAAAAA;
            font-size: 11px;
            font-weight: 300;
            line-height: 11px;
            margin-left: 10px;
            text-decoration: line-through;
						text-overflow: ellipsis;
						text-wrap: nowrap;
						overflow: hidden;
          }
        }

        .add {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: #333333;
						position: relative;
						&::before, &::after {
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							display: block;
							content: '';
							width: 8px;
							height: 1px;
							background: #FFFFFF;
							border-radius: 21px;
						}
						&::after {
							height: 8px;
							width: 1px;
						}
          }
      }
    }
  }
</style>